<template>
  <div class="digBox">
    <div class="digBox__orderType">
      <div style="width:400px;">
        当前订单状态：
        <span v-if="orderDetail.prizeOrderStatus === 0">待发货</span>
        <span v-if="orderDetail.prizeOrderStatus === 1">卖家已发货</span>
        <span v-if="orderDetail.prizeOrderStatus === 2">交易成功</span>
      </div>
      <div
        class="orderRemark"
        v-if="orderDetail.backRemark"
      >
        <el-popover
          placement="bottom-start"
          width="200"
          trigger="hover"
          :disabled="!row.note"
        >
          <div>备注：{{row.note}}</div>
          <i
            slot="reference"
            class="iconfont iconPC-beizhu"
            style="font-size:20px"
          ></i>
        </el-popover>

        {{ orderDetail.backRemark }}
      </div>
      <div
        class="digBox__orderType--send"
        v-if="orderDetail.prizeOrderStatus === 0"
      >
        <el-popover
          placement="bottom-start"
          width="500"
          trigger="click"
          v-model="popVisiable"
        >
          <div style="display:flex;margin-top:10px;">
            <div style="width:100px">收货地址：</div>
            <div
              class="line__input"
              style="width:100%;flex-wrap:wrap;"
            >
              <div style="width:100%;display:flex">
                <el-select
                  placeholder="省份选择"
                  @change="selectChang($event, 'prov')"
                  v-model="popDetail.provinceCode"
                  style="margin: 0px 10px 0px 0px"
                >
                  <el-option
                    v-for="item in addressProv"
                    :value="item.value"
                    :label="item.label"
                    :key="item.value"
                  >{{ item.label }}</el-option>
                </el-select>
                <el-select
                  placeholder="城市选择"
                  not-found-text="请先选择省份"
                  @change="selectChang($event, 'city')"
                  v-model="popDetail.cityCode"
                  style="margin-right:10px"
                >
                  <el-option
                    v-for="item in addressCity"
                    :value="item.value"
                    :label="item.label"
                    :key="item.value"
                  >{{ item.label }}</el-option>
                </el-select>
                <el-select
                  placeholder="区县选择"
                  @change="selectChang($event, 'area')"
                  not-found-text="请先选择城市"
                  v-model="popDetail.areaCode"
                >
                  <el-option
                    v-for="item in addressArea"
                    :value="item.value"
                    :label="item.label"
                    :key="item.value"
                  >{{ item.label }}</el-option>
                </el-select>
              </div>
              <div style="width:100%;margin-top:10px">
                <el-input v-model="popDetail.address"></el-input>
              </div>
            </div>
          </div>
          <div class="line">
            <div class="line__input">买家姓名：</div>
            <el-input v-model="popDetail.receiverName"></el-input>
          </div>
          <div class="line">
            <div class="line__input">手机号码：</div>
            <el-input
              v-model="popDetail.telPhone"
              maxlength="11"
            ></el-input>
          </div>
          <div
            class="modefyAdd"
            slot="reference"
          >修改收货地址</div>
          <div class="lineBottom">
            <el-button @click="popVisiable = false">取 消</el-button>
            <el-button
              type="primary"
              @click="sureChange"
            >确 认</el-button>
          </div>
        </el-popover>
      </div>
    </div>
    <div class="digBox__orderMsg">
      <div style="font-weight:bold">买家信息</div>
      <div class="digBox__orderMsg--line">
        <div>微信昵称：{{ orderDetail.wxuserName }}</div>
        <div>买家昵称：{{ orderDetail.receiverName }}</div>
        <div>买家手机号：{{ orderDetail.telPhone }}</div>
      </div>
      <div class="digBox__orderMsg--lineTwo">
        <div>收货地址：{{ orderDetail.allAddress }}</div>
      </div>
    </div>
    <div class="digBox__orderMsgOrd">
      <div style="font-weight:bold">订单信息</div>
      <div class="digBox__orderMsgOrd--line">
        <div>订单编号：{{ orderDetail.prizeOrderId }}</div>
        <div>创建时间：{{ orderDetail.createTime }}</div>
        <div>
          支付方式：
          <span v-if="orderDetail.payType === 100">余额支付</span>
          <span v-else-if="orderDetail.payType === 101">微信支付</span>
          <span v-else>其他支付</span>
        </div>
      </div>
      <div class="digBox__orderMsgOrd--lineTwo">
        <div
          v-if="orderDetail.sendTime"
          style="margin-right:60px"
        >
          发货时间：{{ orderDetail.sendTime }}
        </div>
        <div v-if="orderDetail.receiveTime">
          收货时间：{{ orderDetail.receiveTime }}
        </div>
      </div>
    </div>
    <div class="digBox__orderLeaveMsg">
      <div style="font-weight:bold;">
        买家留言：{{ orderDetail.buyersNote }}
      </div>
    </div>
    <div class="digBox__good">
      <div class="digBox__good--title">
        <div style="width:330px;margin-left:20px;">商品名称</div>
        <div style="width:100px">数量</div>
        <div style="width:100px">积分价</div>
        <div style="width:100px">配送方式</div>
        <div style="width:100px">运费</div>
        <div style="width:100px">实收款</div>
      </div>
      <div class="digBox__good--content">
        <div
          class="digBox__good--content--box"
          style="width:350px;"
        >
          <img
            :src="orderDetail.integralGoodsPic"
            alt=""
            style="width:80px;height:80px"
          />
          <div style="margin-left:20px;">{{ orderDetail.integralName }}</div>
        </div>
        <div
          class="digBox__good--content--box"
          style="width:100px"
        >1</div>
        <div
          class="digBox__good--content--box"
          style="width:100px"
        >
          <div>{{ orderDetail.price }}</div>
        </div>
        <div
          class="digBox__good--content--box"
          style="width:100px"
        >
          {{ orderDetail.distriMode === 0 ? "物流配送" : "" }}
        </div>
        <div
          class="digBox__good--content--box"
          style="width:100px"
        >
          ￥{{ orderDetail.shippingFee === 0 ? 0.01 : orderDetail.shippingFee }}
        </div>
        <div class="digBox__good--content--price">
          <div>{{ orderDetail.expendIntegral }}</div>
          <div>
            (含快递：￥{{
              orderDetail.shippingFee === 0 ? 0.01 : orderDetail.shippingFee
            }})
          </div>
        </div>
      </div>
    </div>
    <div class="digBox__bottom">
      <div class="digBox__bottom--title">实收款：</div>
      <div style="font-size:18px;color:#56a5e2">
        ￥{{ orderDetail.shippingFee === 0 ? 0.01 : orderDetail.shippingFee }}
      </div>
      <div class="digBox__bottom--title">元</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import address from "@/views/goods/common/city.js";
import {
  integralOrderById,
  updateIntegralOrderById,
} from "@/api/integral/integral";

@Component
export default class ProDetail extends Vue {
  @Prop({
    type: Object,
    default() {
      return {};
    },
  })
  detail: any;

  @Prop({
    type: Boolean,
    default() {
      return false;
    },
  })
  visible: any;

  @Watch("visible")
  getInit() {
    if (this.visible) {
      this.getDetail();
    }
  }

  popVisiable = false;

  orderDetail = {} as any;

  /** 修改地址对象 */
  popDetail = {} as any;

  /** 省数组 */
  addressProv = address.getProvince();

  /** 市数组 */
  addressCity = [];

  /** 区数组 */
  addressArea = [];

  mounted() {
    this.getDetail();
  }

  getDetail() {
    const param = {
      orderId: this.detail.prizeOrderId,
    };
    integralOrderById(param).then((res) => {
      this.orderDetail = res.data;
      this.orderDetail.integralName =
        res.data.shoppingInfVos[0].integralGoodName;
      this.orderDetail.allAddress = res.data.address;
      this.orderDetail.address = res.data.address.split(" ")[3];
      this.addressCity = address.getCity(this.detail.provinceCode);
      this.addressArea = address.getArea(
        this.detail.provinceCode,
        this.detail.cityCode,
      );
      this.popDetail = JSON.parse(JSON.stringify(this.orderDetail));
    });
  }

  /**
   * 选择省市区
   */
  selectChang(value, type) {
    if (type === "prov" && value) {
      this.addressCity = address.getCity(value);
      this.addressArea = [];
      this.popDetail.cityCode = "";
      this.popDetail.areaCode = "";
    }
    if (type === "city" && value) {
      this.addressArea = address.getArea(this.popDetail.provinceCode, value);
      this.popDetail.areaCode = "";
    }
  }

  /**
   * 获取省市区所有数据
   */
  getAddressName(list, value) {
    let name = "";
    if (list.length > 0) {
      for (const item of list) {
        if (item.value === value) {
          name = item.label;
          break;
        }
      }
    }
    return name;
  }

  /**
   * 修改地址后保存
   */
  sureChange() {
    const province = this.getAddressName(
      this.addressProv,
      this.popDetail.provinceCode,
    );
    const city = this.getAddressName(this.addressCity, this.popDetail.cityCode);
    const country = this.getAddressName(
      this.addressArea,
      this.popDetail.areaCode,
    );
    const phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/;

    if (!phoneReg.test(this.popDetail.telPhone)) {
      this.$message.error("请输入正确手机号码");
      return false;
    }

    const param = {
      prizeOrderId: this.popDetail.prizeOrderId,
      provinceCode: this.popDetail.provinceCode,
      cityCode: this.popDetail.cityCode,
      areaCode: this.popDetail.areaCode,
      receiverName: this.popDetail.receiverName,
      telPhone: this.popDetail.telPhone,
      buyersNote: this.popDetail.buyersNote,
      address: `${province} ${city} ${country} ${this.popDetail.address}`,
    };
    updateIntegralOrderById(param).then(() => {
      this.popVisiable = false;
      this.getDetail();
    });
  }
}
</script>

<style lang="scss" scoped>
@include b(digBox) {
  padding: 20px;
  @include e(orderType) {
    border: 1px solid #2d8cf0;
    background-color: #e9f3fb;
    padding: 10px;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #697992;
    flex-wrap: wrap;

    .orderRemark {
      width: 100%;
      padding: 5px 10px;
      background-color: white;
      font-weight: normal;
      margin-top: 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
    }

    @include m(send) {
      margin-top: 20px;
      display: flex;
      width: 400px;
      .sendBtn {
        width: 46px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: white;
        background-color: #288ff8;
        font-weight: normal;
        cursor: pointer;
      }

      .modefyAdd {
        width: 100px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        cursor: pointer;
        font-weight: normal;
        background-color: white;
      }
    }
  }
  @include e(orderMsg) {
    margin-top: 20px;
    color: #8893a7;
    @include m(line) {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }
    @include m(lineTwo) {
      margin-top: 10px;
      display: flex;
    }
  }

  @include e(orderMsgOrd) {
    margin-top: 40px;
    border-top: 1px solid #e4e7ed;
    padding-top: 30px;
    color: #8893a7;
    @include m(line) {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }
    @include m(lineTwo) {
      margin-top: 10px;
      display: flex;
    }
  }

  @include e(orderLeaveMsg) {
    margin: 20px 0px;
    border-top: 1px solid #e4e7ed;
    border-bottom: 1px solid #e4e7ed;
    padding: 10px 0px;
    color: #8893a7;
  }

  @include e(good) {
    margin-top: 15px;
    @include m(title) {
      background-color: #d2ecff;
      padding: 10px 0px;
      display: flex;
      align-items: center;
    }
    @include m(content) {
      display: flex;
      @include m(box) {
        height: 100px;
        display: flex;
        align-items: center;
        border: 1px solid #e9f3fb;
        border-right: none;
        padding-left: 10px;
      }
      @include m(price) {
        height: 100px;
        display: flex;
        width: 15%;
        align-items: center;
        border: 1px solid #e9f3fb;
        padding-left: 10px;
      }
    }
  }

  @include e(bottom) {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    @include m(title) {
      font-weight: bold;
      color: #697992;
      margin-left: 10px;
    }
  }
}
.line {
  display: flex;
  align-items: center;
  margin-top: 10px;

  .line__input {
    display: flex;
    width: 100px;
    align-items: center;
  }
}

.lineBottom {
  display: flex;
  align-items: center;
  margin-top: 20px;
  justify-content: flex-end;
  .lineBottom__sure {
    width: 46px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    background-color: #288ff8;
    font-weight: normal;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
  }

  .lineBottom__cancel {
    width: 46px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    font-weight: normal;
    background-color: white;
    margin-left: 20px;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
  }
}
</style>
